<script lang="ts" setup>
import { activityOrderListApi } from '@/api/lucky';

const orderList = ref<any>([]);
async function loadOrderList() {
  const data = await activityOrderListApi({});
  orderList.value = data;
}
function toDetailPage(code: string) {
  uni.navigateTo({
    url: `/pages/orderDetail/index?code=${code}`,
  });
}
function formatDate(dateString: string): string {
  const date = new Date(dateString);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}
onMounted(() => {
  loadOrderList();
});
</script>

<template>
  <view class="order-wrapper">
    <block v-for="(item, index) in orderList" :key="index">
      <uni-card class="order-item-card">
        <template #title>
          <view class="order-item-title">
            <view class="order-item-title-left">
              <image class="order-item-img" :src="item.prize.img" mode="scaleToFill" />
              <text class="order-item-title-text">
                {{ item.prizeLevelText }}
              </text>
            </view>

            <view class="order-item-title-right" @click="toDetailPage(item.code)">
              <uni-icons type="right" color="#bfbfbf" size="30" />
            </view>
          </view>
        </template>
        <view class="order-item-content">
          <text>
            {{ item.prize.name }}
          </text>
        </view>
        <view class="order-item-divider" />
        <view class="order-item-footer">
          <view class="order-item-footer-left">
            <text class="order-item-footer-left-text">
              兑奖期限：{{ formatDate(item.activity.startTime) }}至{{ formatDate(item.activity.endTime) }}
            </text>
          </view>
          <view class="order-item-footer-right">
            <view class="order-item-footer-right-wrapper">
              <text class="order-item-footer-right-text">
                {{ item.statusText }}
              </text>
            </view>
          </view>
        </view>
      </uni-card>
    </block>
    <uni-card v-if="orderList.length === 0">
      <text>
        暂无抽奖订单
      </text>
    </uni-card>
  </view>
</template>

<style lang="scss" scoped>
.order-item-card {
  .order-item-title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0 20rpx;

    .order-item-title-left {
      display: flex;
      flex-direction: row;
      align-items: center;

      .order-item-title-text {
        font-size: large;
        font-weight: 600;
      }

      .order-item-img {
        width: 60rpx;
        height: 60rpx;
        margin-right: 20rpx;
      }
    }

    .order-item-title-right {}
  }

  .order-item-content {
    font-size: large;
    font-weight: 600;
    color: #575757;
  }

  .order-item-divider {
    border-bottom: 1rpx dashed #b6b6b6;
    margin: 20rpx 0;
  }

  .order-item-footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: relative;

    .order-item-footer-left {
      .order-item-footer-left-text {
        color: #b6b6b6;
      }
    }

    .order-item-footer-right {
      position: absolute;
      right: -40rpx;

      .order-item-footer-right-wrapper {
        background-color: #b6b6b6;
        padding: 5rpx 10rpx;
        border-top-left-radius: 20rpx;
        border-bottom-left-radius: 20rpx;

        .order-item-footer-right-text {
          color: #fff;
        }
      }
    }
  }
}
</style>
